<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt" %>
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <jsp:include page="../header.jsp"></jsp:include>
    <style>
        html,
        body {
            min-height: 100%;
            background-color: #efeff4;
        }

        .animated {
            -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }

        @-webkit-keyframes bounceInDown {
            0%, 60%, 75%, 90%, 100% {
                -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
                transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            }
            0% {
                opacity: 0;
                -webkit-transform: translate3d(0, -100%, 0);
                transform: translate3d(0, -100%, 0);
            }
            60% {
                opacity: 1;
                -webkit-transform: translate3d(0, 25px, 0);
                transform: translate3d(0, 25px, 0);
            }
            75% {
                -webkit-transform: translate3d(0, -10px, 0);
                transform: translate3d(0, -10px, 0);
            }
            90% {
                -webkit-transform: translate3d(0, 5px, 0);
                transform: translate3d(0, 5px, 0);
            }
            100% {
                -webkit-transform: none;
                transform: none;
            }
        }

        @keyframes bounceInDown {
            0%, 60%, 75%, 90%, 100% {
                -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
                transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            }
            0% {
                opacity: 0;
                -webkit-transform: translate3d(0, -100%, 0);
                transform: translate3d(0, -100%, 0);
            }
            60% {
                opacity: 1;
                -webkit-transform: translate3d(0, 25px, 0);
                transform: translate3d(0, 25px, 0);
            }
            75% {
                -webkit-transform: translate3d(0, -10px, 0);
                transform: translate3d(0, -10px, 0);
            }
            90% {
                -webkit-transform: translate3d(0, 5px, 0);
                transform: translate3d(0, 5px, 0);
            }
            100% {
                -webkit-transform: none;
                transform: none;
            }
        }

        .bounce-in-down {
            -webkit-animation-name: bounceInDown;
            animation-name: bounceInDown;
        }

        @-webkit-keyframes fadeInDown {
            0%, 60%, 75%, 90%, 100% {
                -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
                transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            }
            0% {
                opacity: 0;
                -webkit-transform: translate3d(0, -100%, 0);
                transform: translate3d(0, -100%, 0);
            }
            60% {
                opacity: 1;
                -webkit-transform: translate3d(0, 0px, 0);
                transform: translate3d(0, 0px, 0);
            }
            75% {
                -webkit-transform: translate3d(0, 0px, 0);
                transform: translate3d(0, 0px, 0);
            }
            90% {
                -webkit-transform: translate3d(0, 0px, 0);
                transform: translate3d(0, 0px, 0);
            }
            100% {
                -webkit-transform: none;
                transform: none;
            }
        }

        @keyframes fadeInDown {
            0%, 60%, 75%, 90%, 100% {
                -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
                transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            }
            0% {
                opacity: 0;
                -webkit-transform: translate3d(0, -100%, 0);
                transform: translate3d(0, -100%, 0);
            }
            60% {
                opacity: 1;
                -webkit-transform: translate3d(0, 0px, 0);
                transform: translate3d(0, 0px, 0);
            }
            75% {
                -webkit-transform: translate3d(0, 0px, 0);
                transform: translate3d(0, 0px, 0);
            }
            90% {
                -webkit-transform: translate3d(0, 0px, 0);
                transform: translate3d(0, 0px, 0);
            }
            100% {
                -webkit-transform: none;
                transform: none;
            }
        }

        .fade-in-down {
            -webkit-animation-name: fadeInDown;
            animation-name: fadeInDown;
        }

        @-webkit-keyframes bounceOutUp {
            20% {
                -webkit-transform: translate3d(0, -10px, 0);
                transform: translate3d(0, -10px, 0);
            }
            40%,
            45% {
                opacity: 1;
                -webkit-transform: translate3d(0, 20px, 0);
                transform: translate3d(0, 20px, 0);
            }
            100% {
                opacity: 0;
                -webkit-transform: translate3d(0, -100%, 0);
                transform: translate3d(0, -100%, 0);
            }
        }

        @keyframes bounceOutUp {
            20% {
                -webkit-transform: translate3d(0, -10px, 0);
                transform: translate3d(0, -10px, 0);
            }
            40%,
            45% {
                opacity: 1;
                -webkit-transform: translate3d(0, 20px, 0);
                transform: translate3d(0, 20px, 0);
            }
            100% {
                opacity: 0;
                -webkit-transform: translate3d(0, -100%, 0);
                transform: translate3d(0, -100%, 0);
            }
        }

        .bounce-out-up {
            -webkit-animation-name: bounceOutUp;
            animation-name: bounceOutUp;
        }

        @-webkit-keyframes fadeOutUp {
            20% {
                -webkit-transform: translate3d(0, 0px, 0);
                transform: translate3d(0, 0px, 0);
            }
            40%,
            45% {
                opacity: 1;
                -webkit-transform: translate3d(0, 0px, 0);
                transform: translate3d(0, 0px, 0);
            }
            100% {
                opacity: 0;
                -webkit-transform: translate3d(0, -100%, 0);
                transform: translate3d(0, -100%, 0);
            }
        }

        @keyframes fadeOutUp {
            20% {
                -webkit-transform: translate3d(0, 0px, 0);
                transform: translate3d(0, 0px, 0);
            }
            40%,
            45% {
                opacity: 1;
                -webkit-transform: translate3d(0, 0px, 0);
                transform: translate3d(0, 0px, 0);
            }
            100% {
                opacity: 0;
                -webkit-transform: translate3d(0, -100%, 0);
                transform: translate3d(0, -100%, 0);
            }
        }

        .fade-out-up {
            -webkit-animation-name: fadeOutUp;
            animation-name: fadeOutUp;
        }

        .menu-open {
            height: 100%;
            width: 100%;
        }

        .menu-open .mui-scroll-wrapper {
            position: absolute;
            top: 48;
            bottom: 0;
            left: 0;
            z-index: 1;
            width: 100%;
            overflow: hidden;
            -webkit-backface-visibility: hidden;
        }

        .menu-backdrop {
            display: none;
        }

        .menu-open .menu-backdrop {
            position: fixed;
            top: 0;
            bottom: 0;
            height: 100%;
            width: 100%;
            display: block;
            z-index: 998;
        }

        .menu-wrapper {
            position: absolute;
            top: 48px;
            left: 0;
            right: 0;
            z-index: 999;
            text-align: center;
            background-color: #333;
            width: 100%;
        }

        .menu-wrapper.hidden {
            -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
            z-index: -1;
        }

        .menu {
            width: 100%;
        }

        .menu .mui-table-view-inverted {
            color: gray;
            font-size: 19px;
        }

        .menu .mui-table-view-inverted .mui-table-view-cell:after {
            height: 2px;
            left: 0;
            right: 0;
        }

        .menu-wrapper.mui-active,
        .menu-wrapper.mui-active .menu {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }

        #info {
            padding: 20px 10px;
        }

        .mui-input-row select {
            background-color: #333;
        }

        .mui-input-row select option {
            background-color: #333;
        }
    </style>
</head>

<body class="mui-ios mui-ios-11 mui-ios-11-0" style="background: transparent;">
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">已绑定设备</h1>
    <button id="menu-btn" class="mui-btn mui-btn-link mui-pull-right">筛选</button>
</header>
<jsp:include page="../commonMenu.jsp"></jsp:include>

<div class="mui-content">
    <div id="menu-wrapper" class="menu-wrapper hidden">
        <div id="menu" class="menu mui-content-padded">
            <ul class="mui-table-view mui-table-view-inverted">
                <li class="mui-table-view-cell">
                    <div class="mui-input-row">
                        <label>设备ID</label>
                        <input type="text" id="devId" name="devId" value="${devId}" placeholder="请输入设备ID">
                    </div>
                </li>
                <li class="mui-table-view-cell">
                    <div class="mui-input-row mui-select">
                        <label>设备状态</label>
                        <select id="devStatus" name="devStatus" style="color: gray">
                            <option value="" <c:if test="${devStatus eq null}">selected="selected"</c:if>>全部</option>
                            <option value="1" <c:if test="${devStatus eq 1}">selected="selected"</c:if>>待激活</option>
                            <option value="2" <c:if test="${devStatus eq 2}">selected="selected"</c:if>>出厂测试</option>
                            <option value="3" <c:if test="${devStatus eq 3}">selected="selected"</c:if>>正常制水</option>
                            <option value="4" <c:if test="${devStatus eq 4}">selected="selected"</c:if>>欠费</option>
                            <option value="5" <c:if test="${devStatus eq 5}">selected="selected"</c:if>>故障</option>
                            <option value="6" <c:if test="${devStatus eq 6}">selected="selected"</c:if>>关机</option>
                            <option value="7" <c:if test="${devStatus eq 7}">selected="selected"</c:if>>水满</option>
                            <option value="8" <c:if test="${devStatus eq 8}">selected="selected"</c:if>>缺水</option>
                            <option value="8" <c:if test="${devStatus eq 9}">selected="selected"</c:if>>漏水</option>
                            <option value="8" <c:if test="${devStatus eq 10}">selected="selected"</c:if>>滤芯待复位</option>
                            <option value="8" <c:if test="${devStatus eq 11}">selected="selected"</c:if>>硬件测试</option>
                        </select>
                    </div>
                </li>
                <li class="mui-table-view-cell">
                    <div class="mui-button-row">
                        <button type="button" class="mui-btn mui-btn-primary" onclick="search()">查询</button>&nbsp;&nbsp;
                        <button type="button" class="mui-btn mui-btn-danger" onclick="toggleMenu()">取消</button>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div id="menu-backdrop" class="menu-backdrop"></div>
    <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
        <c:forEach items="${devInfoList}" var="vo">
            <a href="${pageContext.request.contextPath}/distributor/devInfo/detail/${vo.id}">
                <li class="mui-table-view-cell">
                    <div class="mui-slider-cell">
                        <div class="oa-contact-cell mui-table">
                            <div class="oa-contact-avatar mui-table-cell">
                                <img src="${pageContext.request.contextPath}/static/img/51.png"/>
                            </div>
                            <div class="oa-contact-content mui-table-cell">
                                <div class="mui-clearfix">
                                    <h4 class="oa-contact-name">设备ID:${vo.id}</h4>
                                    <span class="oa-contact-position mui-h6 mui-btn-danger">
                                    <c:choose>
                                        <c:when test="${vo.devStatus eq 0}">
                                            备用
                                        </c:when>
                                        <c:when test="${vo.devStatus eq 1}">
                                            待激活
                                        </c:when>
                                        <c:when test="${vo.devStatus eq 2}">
                                            出厂测试状态
                                        </c:when>
                                        <c:when test="${vo.devStatus eq 3}">
                                            正常制水
                                        </c:when>
                                        <c:when test="${vo.devStatus eq 4}">
                                            欠费
                                        </c:when>
                                        <c:when test="${vo.devStatus eq 5}">
                                            故障
                                        </c:when>
                                        <c:when test="${vo.devStatus eq 6}">
                                            关机
                                        </c:when>
                                        <c:when test="${vo.devStatus eq 7}">
                                            水满
                                        </c:when>
                                        <c:when test="${vo.devStatus eq 8}">
                                            缺水
                                        </c:when>
                                        <c:when test="${vo.devStatus eq 9}">
                                            漏水
                                        </c:when>
                                        <c:when test="${vo.devStatus eq 10}">
                                            滤芯待复位
                                        </c:when>
                                        <c:when test="${vo.devStatus eq 11}">
                                            硬件测试
                                        </c:when>
                                        <c:otherwise>
                                            未知
                                        </c:otherwise>
                                    </c:choose>
                                </span>
                                </div>
                                <p class="oa-contact-email mui-h6">
                                <h5>用户姓名:${vo.userName}</h5>
                                <fmt:formatDate value="${vo.createTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
                                </p>
                            </div>
                        </div>
                    </div>
                </li>
            </a>
        </c:forEach>
    </ul>
</div>

</body>
<jsp:include page="../footer.jsp"></jsp:include>
<script src="${pageContext.request.contextPath}/static/mui/js/echarts-all.js"></script>
<script>
    var menuWrapper = document.getElementById("menu-wrapper");
    var menu = document.getElementById("menu");
    var menuWrapperClassList = menuWrapper.classList;
    var backdrop = document.getElementById("menu-backdrop");
    document.getElementById("menu-btn").addEventListener('tap', toggleMenu);
    //下沉菜单中的点击事件
    mui('#menu').on('tap', 'a', function () {
        toggleMenu();
        mui.toast("开机成功");
    });
    var busying = false;

    function toggleMenu() {
        if (busying) {
            return;
        }
        busying = true;
        if (menuWrapperClassList.contains('mui-active')) {
            document.body.classList.remove('menu-open');
            menuWrapper.className = 'menu-wrapper fade-out-up animated';
            menu.className = 'menu bounce-out-up animated';
            setTimeout(function () {
                backdrop.style.opacity = 0;
                menuWrapper.classList.add('hidden');
            }, 500);
        } else {
            document.body.classList.add('menu-open');
            menuWrapper.className = 'menu-wrapper fade-in-down animated mui-active';
            menu.className = 'menu bounce-in-down animated';
            backdrop.style.opacity = 1;
        }
        setTimeout(function () {
            busying = false;
        }, 500);
    }

    function search() {
        var devId = $("#devId").val();
        var devStatus = $("#devStatus").val();
        window.location.href = base + "/distributor/devInfo/index?devId=" + devId + "&devStatus=" + devStatus;
    }
</script>
</html>